import React from 'react';
import { Form, Input, Button, Divider } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './style.less';

export default ({ formItemLayout, form, dispatch }) => {
  const { getFieldDecorator, validateFields } = form;

  const onValidateForm = () => {
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'assetType/saveType',
          payload: {
            ...values,
          },
          callback: () => dispatch(routerRedux.push('/type/add/confirm')),
        });
      }
    });
  };

  return (
    <div>
      <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
        <Form.Item
          {...formItemLayout}
          label="类型名称"
        >
          {getFieldDecorator('type_name', {
            rules: [{ required: true, message: '请填写类型名称' }],
          })(
            <Input placeholder="请填写类型名" />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="版本信息"
        >
          {getFieldDecorator('type_version', {
            initialValue: 'v-1.0.1',
          })(
            <Input placeholder="描述信息" />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="备注"
        >
          {getFieldDecorator('type_remark')(
            <Input placeholder="备注信息（可选）" />
          )}
        </Form.Item>
        <Form.Item
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
          }}
          label=""
        >
          <Button type="primary" onClick={onValidateForm}>
            下一步
          </Button>
        </Form.Item>
      </Form>
      <Divider style={{ margin: '40px 0 24px' }} />
      <div className={styles.desc}>
        <h3>说明</h3>
        <h4>用来给用户提供资产类型选择</h4>
        <p>更具类型不同可以填写不同的类型属性</p>
        <h4>备注和描述</h4>
        <p>增加一些辅助描述和备注信息</p>
      </div>
    </div>
  );
};
